<template>
    <div :class="['animation']">
        <ul :class="['appContainer', linkListClass]" @contextmenu.prevent="" @click="lostFocus()">
            <li v-for="(item, index) in [...linkList, ...cusLink]" :key="item.url"
                @contextmenu="removeClick($event, index)">
                <a :href="item.url" target="_blank">
                    <div class="item">
                        <img :src="item.icon" alt="">
                    </div>
                </a>
                <p class="title">
                    <!-- {{ item.name == '' ? item.title : item.name }} -->
                </p>
            </li>
            <li @click.stop="toggleDark()">
                <div class="item">
                    <img src="../assets/moon.png" v-if="isDark">
                    <img src="../assets/sun.png" v-else>
                </div>
                <p class="title">
                    <!-- 主题切换 -->
                </p>
            </li>
            <li @click.stop="showWall()">
                <div class="item">
                    <img src="../assets/pic.png">
                </div>
                <p class="title">
                    <!-- 壁纸 -->
                </p>
            </li>
            <li @click.stop="addItem">
                <div class="item">
                    <img src="../assets/icon/add.svg">
                </div>
                <p class="title">
                    &nbsp;
                </p>
            </li>
        </ul>
        <div :style="cardPosition" class="addCard animate-bounceIn" v-if="isCardShow">
            <p class="title">添加网站快捷方式</p>
            <div class="url input">
                <input type="text" placeholder="网址" v-model="item.url">
            </div>
            <!-- <div class="name input">
                <input type="text" placeholder="名称-自动获取" v-model="item.name">
            </div> -->
            <div class="addbtn" @click.stop="addUrl">添加</div>
        </div>
        <div @click.stop="removeUrl" :style="removeCard" :class="['animate-bounceIn', 'right-board']" v-if="isRemoveShow">
            <ul>
                <li>删除</li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, computed, onMounted } from 'vue';
import { useStore } from '../store';
import { useDark, useToggle } from "@vueuse/core";
import { setCurLink, getCurLink } from '../utils/tools'
const store = useStore()
const lostFocus = () => {
    return store.lostFocus()
}
const linkListClass = ref([
    "scrollbar-thin",
    "scrollbar-thumb-light-700",
    "scrollbar-rounded-1",
    "scrollbar-track-gray-300"
])






// 客户定制的标签收藏
const linkList = ref([])
const cusLink = ref([])
// 绑定的表单数据
const item = reactive({
    name: "",
    url: "",
})
const baseURL = 'https://favicon.qqsuu.cn/'
const addUrl = async () => {
    const obj = {
        icon: baseURL + item.url,
        url: item.url,
        name: '',
    }
    try {
        cusLink.value.push(obj)
        setCurLink(cusLink.value)//存储用户收藏的网页
    } catch (error) {

    }
    isCardShow.value = false
    isRemoveShow.value = false
}

const isRemoveShow = ref(false)
const removeCard = reactive({
    top: '',
    left: ''
})
const removeIndex = ref(3)
function removeClick(e, index) {
    if (index < 3) return
    removeIndex.value = index
    const { clientX, clientY } = e
    const offsetParent = e.target.offsetParent
    const { offsetLeft, offsetTop, offsetWidth } = offsetParent
    removeCard.left = (clientX) - (offsetLeft - (offsetWidth / 2)) + 'px'
    removeCard.top = (clientY) - (offsetTop) + 'px'
    isRemoveShow.value = isRemoveShow.value ? false : true
}

function removeUrl() {
    try {
        cusLink.value.splice(removeIndex.value - linkList.value.length, 1)
        setCurLink(cusLink.value)
    } catch (error) {

    }
    isCardShow.value = false
    isRemoveShow.value = false
}


const defaultLink = [
    {
        "name": "Bilibili",
        "url": "https://www.bilibili.com/",
        "icon": "https://www.bilibili.com/favicon.ico?v=1"
    },
    {
        "name": "网易云",
        "url": "https://music.163.com/",
        "icon": "https://s1.music.126.net/style/favicon.ico?v20180823"
    },
    {
        "name": "翻译",
        "url": "https://fanyi.baidu.com/",
        "icon": "https://fanyi-cdn.cdn.bcebos.com/webStatic/translation/img/favicon/favicon.ico"
    },
    // {
    //     "name": "米娜起始页",
    //     "url": "https://mstart.cn/",
    //     "icon": "https://mstart.cn/assets/minaqsy.png"
    // }
]

onMounted(async () => {
    linkList.value = defaultLink
    cusLink.value = getCurLink() || []
})







// 添加收藏网站显示卡片的位置
const isCardShow = ref(false)
const isSearch = computed(() => {
    return store.isSearchShow
})
watch(isSearch, (n, o) => {
    if (n) {
        isCardShow.value = false
        isRemoveShow.value = false
    }
}, { immediate: true })
const cardPosition = reactive({
    top: '',
    left: ''
})
const addItem = (e) => {
    const { clientX, clientY } = e
    const offsetParent = e.target.offsetParent
    const { offsetLeft, offsetTop, offsetWidth } = offsetParent
    cardPosition.left = (clientX) - (offsetLeft - (offsetWidth / 2)) + 'px';
    cardPosition.top = (clientY) - (offsetTop) + 'px';
    isCardShow.value = isCardShow.value ? false : true
}







const switchMode = useDark({
    selector: "html",
    valueDark: "dark",
    valueLight: "",
});
watch(switchMode, (n, o) => {
    store.setData("isDark", n)
})
const toggleDark = useToggle(switchMode);
const isDark = computed(() => {
    return store.isDark
})




const emit = defineEmits(['uploadFile'])

const showWall = () => {
    emit('uploadFile')
}


</script>


<style lang="scss" scoped>
.animation {
    width: 530px;
    max-width: 70%;
    transition: all .5s;
    position: absolute;
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation-duration: 750ms;
}

.appContainer {
    @apply grid max-h-md overflow-y-auto overflow-x-hidden grid-cols-2 sm: grid-cols-3 md: grid-cols-5 auto-cols-auto gap-10;

    li {
        /* @apply m-auto; */

        .item {
            @apply bg-light-300 dark: bg-gray-700 dark:hover:bg-gray-900 transition-all flex p-6 rounded-xl hover:bg-light-900;
            overflow: hidden;

            img {
                @apply w-10 min-w-6 m-auto;
            }
        }

        .title {
            @apply my-2 text-xs text-light-50 diagonal-fractions tracking-tight;
            font-family: "PingFang SC", "Microsoft Yahei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}

.addCard {
    @apply w-80 bg-light-300 dark: bg-gray-900 fixed px-6 py-2 rounded-lg;

    .title {
        @apply my-2;
    }

    .input {
        input {
            @apply w-full my-1 rounded-sm pl-3 py-1;
        }
    }

    .name {
        @apply my-2;
    }

    .url {
        @apply my-2;
    }

    .addbtn {
        @apply text-center bg-blue-600 rounded-md my-2 py-1;
    }
}

.right-board {
    @apply bg-light-300 dark: bg-gray-900 fixed px-6 py-2 rounded-lg;

    li {
        word-break: keep-all;
    }
}
</style>